{% extends "base.html" %}

{% block title %}我的收藏 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h2">我的收藏图书</h1>
            <p class="lead">管理您收藏的图书资源</p>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for book in favorite_books %}
        <div class="col">
            <div class="card h-100 book-card">
                {% if book.cover_path %}
                <img src="{{ url_for('static', filename='covers/' + book.cover_path) }}" 
                     class="card-img-top book-cover" alt="{{ book.title }}" 
                     onerror="this.onerror=null; this.src='{{ url_for('static', filename='images/default_cover.jpg') }}'">
                {% else %}
                <div class="card-img-top book-cover-placeholder d-flex align-items-center justify-content-center">
                    <span class="text-center">
                        <i class="fas fa-book fa-3x text-muted"></i>
                        <p class="mt-2 mb-0 small text-muted">暂无封面</p>
                    </span>
                </div>
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ book.title }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">{{ book.author }}</h6>
                    <p class="card-text">{{ book.description[:100] }}...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <i class="fas fa-eye"></i> {{ book.views }} 次浏览
                        </small>
                        <div class="btn-group">
                            <a href="{{ url_for('view_book', book_id=book.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-book-open"></i> 阅读
                            </a>
                            <button class="btn btn-sm btn-outline-danger favorite-btn" data-book-id="{{ book.id }}">
                                <i class="fas fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <small>上传于 {{ book.created_at.strftime('%Y-%m-%d') }}</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if not favorite_books %}
    <div class="text-center mt-5 py-5">
        <div class="mb-4">
            <i class="fas fa-heart-broken fa-5x text-muted"></i>
        </div>
        <h3>您还没有收藏图书</h3>
        <p class="text-muted">浏览图书库并收藏您喜欢的图书</p>
        <a href="{{ url_for('books') }}" class="btn btn-primary mt-3">
            <i class="fas fa-search me-2"></i>浏览图书
        </a>
    </div>
    {% endif %}
</div>

<style>
.book-cover {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.book-cover-placeholder {
    height: 200px;
    background-color: #f8f9fa;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.book-card {
    transition: transform 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 为所有收藏按钮添加点击事件监听器
    document.querySelectorAll('.favorite-btn').forEach(function(btn) {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            const bookId = this.getAttribute('data-book-id');
            const card = this.closest('.col');
            
            toggleFavorite(bookId, this, card);
        });
    });
});

function toggleFavorite(bookId, button, card) {
    fetch(`/book/${bookId}/favorite`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'same-origin'
    })
    .then(response => response.json())
    .then(data => {
        if (data.action === 'unfavorited') {
            // 从收藏页面移除该卡片
            card.remove();
            
            // 检查是否还有收藏书籍
            const remainingBooks = document.querySelectorAll('.book-card');
            if (remainingBooks.length === 0) {
                // 如果没有书籍了，显示空状态
                location.reload();
            }
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
{% endblock %} 